// src/directives/vHorizontalWheelScroll.ts
import type { App, Directive } from 'vue';

interface ElWithHandler extends HTMLElement {
  _onWheelHandler?: (event: WheelEvent) => void;
}
const HorizontalWheelScroll: Directive<ElWithHandler> = {
  mounted(el) {
    el._onWheelHandler = (event: WheelEvent) => {
      // 如果有水平滚动条才执行
      if (el.scrollWidth > el.clientWidth) {
        event.preventDefault();
        el.scrollLeft += event.deltaY;
      }
    };
    el.addEventListener('wheel', el._onWheelHandler);
  },
  unmounted(el) {
    if (el._onWheelHandler) {
      el.removeEventListener('wheel', el._onWheelHandler);
    }
  },
};


export function setupHorizontalWheelScroll(app: App) {
  app.directive('horizontal-wheel-scroll', HorizontalWheelScroll);
}